<template>
  <div class="header">
    <div class="logo">
      <img class="img-logo" src="../assets/logo.png" alt="zealous-ui" />
      <a class="left" href="javascript:;" @click="toHome">Zealous {{windowWidth?'':'UI'}}</a>
      <!-- <z-badge type="primary" value="V 0.0.1">
        <a class="left" href="javascript:;" @click="toHome">Zealous UI</a>
      </z-badge> -->
    </div>
    <div class="toolsBox">
      <ul>
        <li class="tool-item">
          <z-select :style="{width:windowWidth?'130px':'150px'}" v-model="searchVal" placeholder="搜索组件" searchable @change="handleChange">
            <z-option v-for="item in searchOption" :key="item.value" :label="item.label" :value="item.value">
            </z-option>
          </z-select>
        </li>
        <template v-if="!windowWidth">
          <li
            class="tool-item spanText"
            v-for="(item, index) in tools"
            :key="index"
            :class="{'active': Number(nIndex) == index}"
            @click="pageView(item, index)"
            >
            {{ item.name }}
          </li>
        </template>
      </ul>
    </div>
  </div>
</template>

<script setup lang=ts>
import { computed, ref, reactive, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { menuList } from '../router/routerPage/index';
import emitter from "../../packages/utils/bus";

const router = useRouter()
const nIndex = ref(sessionStorage.getItem("nIndex") || '0');
const searchVal = ref('')
const searchOption = computed(() => {
  const arr:any = router?.options?.routes[1]?.children || []
  if(arr.length){
    for (const item of arr) {
      item.value = item.path
      item.label = item.name
    }
  }
  return arr
})
const state = reactive({
  tools: [
    {
      name: "首页",
      path: "/",
    },
    {
      name: "组件",
      path: "/home",
    },
    {
      name: "Gitee",
      path: "open",
      url: "https://gitee.com/unicorn-zbf/zealous-ui"
    }
  ],
});
const { tools } = state;

const toHome = () => {
  router.push("/");
  sessionStorage.setItem("nIndex", '0');
};

const pageView = (item:any,index:any) => {
  if (item.path == "open") {
    window.open(item.url);
  } else {
    router.push(item.path);
    nIndex.value = index
  }
  sessionStorage.setItem("nIndex", index);
}

const handleChange = () =>{
  let index = '0'
  for (const [key1,val1] of menuList.entries()) {
    for (const [key2,val2] of val1.list.entries()) {
      if(searchVal.value === val2.path){
        index = key1 + '-' + key2
      }
    }
  }
  sessionStorage.setItem("mIndex", index);
  router.push(searchVal.value);
}
//监听设备
let windowWidth = ref(false);
const resizeWidth = () => {
    if(window.innerWidth<800){
        windowWidth.value = true
    } else {
        windowWidth.value = false
    }
}
window.addEventListener('resize',()=>{
    resizeWidth()
})
onMounted(() => {
    resizeWidth();
})
</script>

<style lang="scss" scoped>
.header{
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  box-shadow: 0 2px 8px #f0f1f2;
  padding: 0 40px;
  display: flex;
  justify-content: space-between;
  .logo{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    cursor: pointer;
    .img-logo{
    width: 50px;
    height: 50px;
    // float: left;
    // margin: 20px 10px 0 0;
  }
  .left{
    width: 100px;
    float: left;
    color: #4a5264;
    font-weight: 700;
    font-size: 18px;
    text-decoration: none;
  }
  }
  .toolsBox{
    float: right;
    ul{
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .spanText{
      width: 33px;
    }
    .tool-item{
      font-weight: 400;
      font-size: 16px;
      padding: 8px 3px;
      margin-left: 50px;
      // border-bottom: 2px solid #fff;
      display: inline-block;
      float: none;
      line-height: normal;
      transition: all .2s ease;
      cursor: pointer;
      color: #333;
      :deep(.z-select-input__inner){
        border: none !important;
      }
      :deep(.z-select .z-select-input .select-icon){
        display: none !important;
      }
    }
    .tool-item:hover{
      :deep(.z-select .z-select-input){
        border-radius: 30px;
        border: 1px solid skyblue !important;
      }
    }
    .active{
      color: #409eff;
      border-bottom: 2px solid #409eff;
    }
  }
  :deep(.z-badge .z-badge__content.is-fixed){
    transform: translate(120%, -50%) !important;
  }
}

</style>
